<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库设置</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    仓库名称
    <el-select v-model="warehouseId" placeholder="请选择仓库">
        <el-option
                v-for="item in warehouseNameAll"
                :key="item.value"
                :label="item.wareName"
                :value="item.id">
        </el-option>
    </el-select>&nbsp;&nbsp;
    创建时间
    <el-date-picker
            v-model="datalist.settledDate"
            type="datetime"
            value-format="yyyy-MM-dd "
            format="yyyy-MM-dd "
            placeholder="选择日期时间"
            style="width:400px">
    </el-date-picker>
    <el-button @click="selectWarehouse" type="primary" icon="el-icon-search"
               style="margin-left: 100px;margin-top: 0px; ">查询
    </el-button>
    <el-button @click="addToWarehouse" type="primary" icon="el-icon-plus" style="margin-left: 100px;margin-top: 0px; ">
        添加
    </el-button>
    <template>
        <el-table
                :data="wareDate"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    type="index">
            </el-table-column>
            <el-table-column
                    label="仓库编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="仓库名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="负责人">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.person }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系电话">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货区数目">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.cargoNum }}</span>
                </template>
            </el-table-column>
            <!--   <el-table-column
                     label="货架数目">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.totalNum }}</span>
               </template>
             </el-table-column >
              <el-table-column
                     label="货位数目">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.shelvesNum }}</span>
               </template>
             </el-table-column>
             <el-table-column
                     label="空置货位">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.vacantSpace }}</span>
               </template>
             </el-table-column>-->
            <el-table-column
                    label="仓库描述">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.details }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center"
                             prop="scope.row.deteTime "
                             :formatter="dateFormat"
                             :resizable="false"
                             label="创建时间">
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span style="margin-left: -10px" v-if=" scope.row.status ==='0'">
                        <el-button type="success" round>已启用</el-button>
                    </span>
                    <span style="margin-left: -10px" v-if=" scope.row.status !='0'">
                      <el-button type="danger" round>已禁用</el-button>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" style="width: 180px">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle
                               @click="handleEdit(scope.$index, scope.row)"></el-button><!--修改-->
                    <el-button type="success" icon="el-icon-check" circle
                               @click="handle(scope.$index, scope.row)"></el-button><!--改变状态-->
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="refreshData"
                :total="total"
                :current-page="current"
                :page-size="pageSize">
        </el-pagination>
        <!--保存新增用户的对话框-->
        <el-dialog title="添加仓库" :visible.sync="dialogFormVisible" label-width="100px" @close="closeMyDialog">
            <!--方法清空添加-->
            <el-form :model="addToWare" label-width="160px" :inline="true">
                <el-form-item label="仓库编号:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.wareNo" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="仓库名称:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.wareName" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.person" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.telephone" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货区数目:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.cargoNum" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="详细地址:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.address" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="仓库详情:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.details" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="经纬度:" :label-width="formLabelWidth">
                    <el-input v-model="addToWare.place" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <div v-if="addToWare.deteTime!=null">
                    <el-form-item label="时间:" :label-width="formLabelWidth" format="yyyy-MM-dd">
                        <el-input v-model="addToWare.deteTime" autocomplete="off" :label-width="formLabelWidthInputBox"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:" :label-width="formLabelWidth">
                        <span style="margin-left: -10px" v-if=" addToWare.status ==='0'"><el-button type="success"
                                                                                                    round>已启用</el-button></span>
                        <span style="margin-left: -10px" v-if=" addToWare.status !='0'"><el-button type="danger" round>已禁用</el-button></span>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveProductAdd">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                wareDate: null, //查询对应的仓库数据list
                warehouseNameAll: null,//查询的所有仓库名称
                cargoAreaNameAll: null,//查询所有货区名称
                shelvesIdAll: null,//查询所有货区编号
                warehouseId: null,//条件查询选择的id
                datalist: {
                    settledDate: null,//获取到的输入时间
                    cargoAreaName: null, //选择货区
                    wareId: null,//选择仓库id
                },
                total: 0,
                current: 1,
                pageSize: 2,//分页数据
                formLabelWidth: '80px',
                formLabelWidthInputBox: '30px',//设置弹出框的大小
                dialogFormVisible: false, //隐藏新增的弹出框
                addToWare: { //添加仓库获取值存放
                    id: null,
                    wareNo: null,
                    wareName: null,
                    person: null,
                    telephone: null,
                    cargoNum: null,
                    details: null,
                    address: null,
                    place: null,
                    deteTime: null,
                    status: null,
                    company_id: null
                },
            }
        },
        methods: {
            //时间格式化
            dateFormat: function (row, column) {
                console.log(column);
                var date = new Date(row.deteTime);
                console.log(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            refreshData(current) {//查询数据
                this.current = current;
                axios.get("/list/t-ware-paging?current=" + current).then(value => {//查询所有库区数据
                    if (value.data.state == 1) {
                        this.wareDate = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                        console.log(value.data.data)
                    }
                })
            },
            selectWarehouse() {//查询方法--条件
                axios.get("/t-ware/select/" + this.warehouseId + "&" + this.datalist.settledDate).then(value => {//根据仓库id，时间查询
                    if (value.data.state == 1) {
                        this.wareDate = value.data.data;
                    }
                })
            },
            addToWarehouse() {//添加功能
                this.addToWare.wareNo = null,
                    this.addToWare.wareName = null,
                    this.addToWare.person = null,
                    this.addToWare.telephone = null,
                    this.addToWare.cargoNum = null,
                    this.addToWare.details = null,
                    this.addToWare.address = null,
                    this.addToWare.place = null,
                    this.addToWare.deteTime = null,
                    this.dialogFormVisible = true;//显示弹框
            },
            saveProductAdd() { //新增的确定按钮----添加到数据库
                if (this.addToWare.id != null) {
                    axios.put("/t-ware/updateWare", this.addToWare).then(value => {
                        if (value.data.status == 1) {
                            this.$message("修改成功!")
                        }
                        this.dialogFormVisible = false;//关闭弹框
                        this.refreshData(this.current)//重新查询
                    })
                } else {
                    axios.post("/addToWare", this.addToWare).then(value => {
                        if (value.data.status == 1) {
                            this.$message("添加成功!")
                        }
                        this.dialogFormVisible = false;//关闭弹框
                        this.refreshData(this.current)//重新查询
                    })
                }
            },
            closeMyDialog() {  //新增的取消按钮----清空输入框数据
                this.dialogFormVisible = false //关闭弹出框
                if (this.addToWare.id === null) {
                    this.addToWare.wareNo = null,
                        this.addToWare.wareName = null,
                        this.addToWare.person = null,
                        this.addToWare.telephone = null,
                        this.addToWare.cargoNum = null,
                        this.addToWare.details = null,
                        this.addToWare.address = null,
                        this.addToWare.place = null
                }
            },
            handleEdit(input, row) {//编辑--修改
                this.addToWare = row
                this.dialogFormVisible = true;//显示弹框
            },
            handle(index, row) {//改变状态
                console.log(row.status);
                console.log(row.id);
                this.$confirm("是否改变状态", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'ware'
                }).then(() => {
                    axios.put("/t-ware/status", {id: row.id, status: row.status}).then(value => {//修改状态
                        if (value.data.state == 1) {
                            this.refreshData(this.current)//重新查询
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消取消'
                    });
                });
            },
        },
        mounted() {//加载
            this.refreshData(1),
                axios.get("/list/t-ware").then(value => {//查询所有仓库名称
                    if (value.data.state == 1) {
                        this.warehouseNameAll = value.data.data;
                        console.log(this.warehouseNameAll)
                    }
                })
        }
    })
</script>
</body>
</html>